<script setup>
import { computed, reactive, ref, watch } from 'vue'
import ButtonCircle from './ButtonCircle.vue'
import { StringUtils } from '../utils/StringUtils'

const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  },
  placeholder: {
    type: [String, Number],
    default: '请输入关键字'
  },
  placeholderClass: {
    type: [String],
    default: 'placeholder-class'
  },
  icon: {
    type: [String],
    default: ''
  },
  more: {
    type: Boolean,
    default: true
  }
})

const emits = defineEmits(['update:modelValue', 'input', 'search'])

const form = reactive({
  value: ''
})

const suffixIcon =computed(()=>{
  return !StringUtils.isEmptyOrNull(form.value)
})

const inputIcon = computed(() => {
  return props.icon || ''
})

const onClickIcon = function () {
  form.value = ""
  emits('input', form.value)
  emits('update:modelValue', form.value)
}

watch(
  () => props.modelValue,
  (value) => {
    form.value = value
  },
  { immediate: true }
)

const onInput = function(e) {
  form.value = e.detail.value
  emits('input', form.value)
  emits('update:modelValue', form.value)
}

const onSubmit = function() {
  emits('search', form)
  close()
}

const popupRef = ref(null)
const showMoreFilter = function(e) {
  popupRef.value['open']()
}

const close = function() {
  popupRef.value['close']()
}
</script>

<template>
  <div :class="['search-input',!more?'hide':'']">
    <div class="input-warp">
      <div class="input-el">
        <span :class="['prefix-icon', inputIcon]" v-if="icon">
          <i class="icon search" />
        </span>
        <uni-icons type="search" size="22" v-else class="prefix-icon" />
        <input
          class="input-text"
          type="text"
          v-model="form.value"
          @input="onInput"
          :placeholder="placeholder"
          :placeholder-class="placeholderClass"
        />
        <uni-icons v-if="suffixIcon" class="content-clear-icon" type="clear" color="#c0c4cc"
                   @click="onClickIcon" size="22"></uni-icons>
        <button-circle class="btn" @click="onSubmit"> 搜索</button-circle>
      </div>
      <div :class="['adv-filter']" @click="showMoreFilter" v-if="more">
        <image
          class="image-icon-m32"
          src="@/static/icons/icon-filter.png"
          style="margin-right: 3px; position: relative; top: 2px"
        >
        </image>
      </div>
    </div>

    <uni-popup

      ref="popupRef" type="top" :is-mask-click="false" background-color="#fff">
      <div class="more-filter">
        <div class="filter-warp">
          <div class="filter-title">
            <div>筛选</div>

            <a @click="close">
              <uni-icons type="close" size="24"></uni-icons>
            </a>
          </div>

          <div class="filter-body">
            <slot></slot>
          </div>
          <div class="filter-footer">
            <button-circle class="btn" @click="onSubmit"> 搜索</button-circle>
          </div>
        </div>
      </div>
    </uni-popup>
  </div>
</template>

<style scoped lang="scss">
.search-input {
  --right: 26px;

  &.hide{
    .btn{
      right:0 !important;
    }
  }

  .input-warp {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;

    .input-el{
      display: flex;
      flex-direction: row;
      background: #f2f2f2;
      align-items: center;
      border-radius: 40rpx;
      flex-grow: 1;
    }

    .adv-filter {
      min-width: var(--right);


    }

    .prefix-icon {
      position: absolute;
      left: 8px;
      top: 8px;
    }

    .input-text {
      flex-grow: 1;
      padding-left: 32px;
    }

    .btn {

    }
  }

  .more-filter {
    .filter-warp {
      .filter-title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 12rpx;
      }

      .filter-body {
        padding: 12rpx;
      }
    }
  }
}
</style>
